<template>
  <div class="basic-form">
    <el-dialog
      custom-class="small-padding-dialog"
      :close-on-click-modal="false"
      :title="type == 'edit' ? '隔离点信息编辑' : '隔离点信息新增'"
      :visible.sync="dialogVisible"
      width="80%"
      @close="handleClosed"
    >
      <el-form
        :model="formData"
        ref="form"
        class="form-wrap"
        style="padding-top:0px;"
        :rules="rules"
      >
        <el-form-item label="隔离点名称" prop="hotelName">
          <el-input v-model="formData.hotelName" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="所属区划" prop="hotelStreet">
          <el-popover
            placement="bottom"
            width="400"
            trigger="click"
            v-model="delFlagVisibleAreadiog"
          >
            <el-tree
              class="filter-tree"
              :data="treeAreaData"
              lazy
              :load="loadNode"
              :props="defaultAreaProps"
              :filter-node-method="filterNode"
              :expand-on-click-node="false"
              @node-click="handleCheckChangeAreadiog"
              ref="tree"
            ></el-tree>
            <el-input
              v-halfCharCode
              slot="reference"
              maxlength="30"
              placeholder="请选择行政区域"
              v-model="formData.hotelStreet"
              :suffix-icon="
                delFlagVisibleArea ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
              "
              clearable
            />
          </el-popover>
        </el-form-item>
        <el-form-item label="隔离点类型" prop="hotelType">
          <el-select
            clearable
            v-model="formData.hotelType"
            placeholder="请选择"
            filterable
          >
            <el-option
              v-for="item in getDict('hotel_type')"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址" prop="hotelAddr">
          <el-input v-model="formData.hotelAddr" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="楼层数量" prop="floorNum">
          <el-input
            v-model="formData.floorNum"
            v-only-number="{ min: 0, max: 99999999 }"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item prop="livingFloor" label="隔离人员居住楼层">
          <el-input
            v-model="formData.livingFloor"
            placeholder="范例：5、6、7、8"
          />
        </el-form-item>
        <el-form-item label="楼道及周边是否安装视频监控" prop="isMonitor">
          <el-select
            clearable
            v-model="formData.isMonitor"
            placeholder="请选择"
          >
            <el-option label="是" :value="1" />
            <el-option label="否" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否配备楼道安保" prop="isSecurity">
          <el-select
            clearable
            v-model="formData.isSecurity"
            placeholder="请选择"
          >
            <el-option label="是" :value="1" />
            <el-option label="否" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="隔离点联系人" prop="hotelContact">
          <el-input v-model="formData.hotelContact" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="隔离点联系电话" prop="hotelPhone">
          <el-input v-model="formData.hotelPhone" placeholder="请输入" />
        </el-form-item>
        <!-- <el-form-item label="使用开始时间" prop="useStartTime">
          <el-date-picker
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="formData.useStartTime"
            type="datetime"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="使用终止时间" prop="useEndTime">
          <el-date-picker
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="formData.useEndTime"
            type="datetime"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item> -->
        <el-form-item label="备注" class="full" prop="remark">
          <el-input
            v-model="formData.remark"
            type="textarea"
            maxlength="10"
            placeholder="请输入"
          />
        </el-form-item>
      </el-form>
      <!-- <h3>
        驻点服务管理信息
        <el-button size="mini" style="position: absolute; right:35px;" type="primary" @click="addFeeInformation">新增</el-button>
      </h3>
      <el-form class="mt20" :model="formData" :rules="hotelUsersRules" ref="hotelUsersForm">
        <el-table :data="formData.hotelUsers" stripe>
          <el-table-column prop="personType" align="left" label="人员类型" width="180">
            <template slot-scope="scope">
              <el-form-item :prop="'hotelUsers.' + scope.$index + '.personType'" :rules="hotelUsersRules.personType">
                <el-select clearable v-model="scope.row.personType" placeholder="请选择人员类型" @change="personnelTypeChange($event, scope.$index)">
                  <el-option v-for="item in getDict('person_type')" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column align="left" prop="name" label="姓名" width="150">
            <template slot-scope="scope">
              <el-form-item :prop="'hotelUsers.' + scope.$index + '.name'" :rules="hotelUsersRules.name">
                <el-input v-model="scope.row.name" placeholder="姓名" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="cardId" label="证件号码" align="left" width="200">
            <template slot-scope="scope">
              <el-form-item :prop="'hotelUsers.' + scope.$index + '.cardId'">
                <el-input v-model="scope.row.cardId" placeholder="请输入证件号码" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column align="left" prop="telPhone" label="联系方式" width="140">
            <template slot-scope="scope">
              <el-form-item :prop="'hotelUsers.' + scope.$index + '.telPhone'">
                <el-input v-model="scope.row.telPhone" placeholder="请输入联系方式" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="post" align="left" label="职务" width="170">
            <template slot-scope="scope">
              <el-form-item :prop="'hotelUsers.' + scope.$index + '.post'">
                <el-input v-model="scope.row.post" placeholder="请输入姓名" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column align="left" prop="remark" label="备注">
            <template slot-scope="scope">
              <el-form-item :prop="'hotelUsers.' + scope.$index + '.remark'">
                <el-input v-model="scope.row.remark" placeholder="请输入备注" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="left">
            <template slot-scope="scope">
              <el-button @click.stop="deleteList(scope.$index, 'formData','hotelUsers')" type="text">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>-->
      <!-- 物业选择弹窗 -->
      <!-- <choose-dialog v-bind="dialogAttrs" ref="propertyChoose" @chooseData="handlePropertyChange" /> -->
      <div slot="footer">
        <el-button type="primary" @click="save">提交</el-button>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addOrEdit, getObj } from '@/views/yq-hotel/api/baseInfo';
import { validatePhone } from '~/utils/validate.js';
import { getDivision } from '@/admin/api/division';
export default {
  name: 'hotelDialog',
  inject: ['initList'],
  data() {
    return {
      delFlagVisibleArea: false,
      delFlagVisibleAreadiog: false,
      hotelUsersIndex: '',
      //弹窗类型，默认新增
      type: 'add',
      //选中的物业
      radioId: '',
      //弹窗开关
      treeAreaData: [],
      dialogVisible: false,
      // 表单项
      defaultAreaProps: {
        children: 'children',
        label: 'divisionName',
      },
      delFlagAreadiog: '',
      //弹框表单
      tableOption: {
        realName: '',
        idCard: '',
        username: '',
        password: '',
        avatars: '',
        phone: '',
        role: [],
        lockFlag: '',
        createTime: '',
      },
      formData: {
        hotelName: '',
        hotelStreet: '',
        hotelType: '',
        hotelAddr: '',
        floorNum: '',
        livingFloor: '',
        isMonitor: '',
        isSecurity: '',
        hotelContact: '',
        hotelPhone: '',
        useStartTime: '',
        useEndTime: '',
        remark: '',
        hotelUsers: [],
      },
      // 校验
      rules: {
        hotelName: [
          { required: true, message: '隔离点名称不能为空', trigger: 'blur' },
        ],
        hotelStreet: [
          { required: true, message: '所属区划不能为空', trigger: 'change' },
        ],
        hotelType: [
          { required: true, message: '隔离点类型不能为空', trigger: 'blur' },
        ],
        hotelAddr: [
          { required: true, message: '详细地址不能为空', trigger: 'blur' },
        ],
        floorNum: [
          { required: true, message: '楼层数量不能为空', trigger: 'blur' },
        ],
        reference: [
          { required: true, message: '行政区域必填', trigger: 'blur' },
        ],
        livingFloor: [
          {
            required: true,
            message: '隔离人员居住楼层不能为空',
            trigger: 'blur',
          },
        ],
        isMonitor: [
          {
            required: true,
            message: '请选择楼道及周边是否安装视频监控',
            trigger: 'blur',
          },
        ],
        isSecurity: [
          {
            required: true,
            message: '请选择是否配备楼道安保',
            trigger: 'blur',
          },
        ],
        hotelContact: [
          { required: true, message: '隔离点联系人不能为空', trigger: 'blur' },
        ],
        hotelPhone: [
          {
            required: true,
            message: '隔离点联系电话不能为空',
            trigger: 'blur',
          },
          { validator: validatePhone, trigger: 'blur' },
        ],
        // useStartTime: [
        //   { required: true, message: '使用开始时间不能为空', trigger: 'blur' },
        // ],
        // useEndTime: [
        //   { required: true, message: '使用开始结束不能为空', trigger: 'blur' },
        // ],
      },
      // //租金信息
      // hotelUsersRules: {
      //   personType: [
      //     { required: true, message: "请选择人员类型", trigger: "change" },
      //   ],
      //   name: [
      //     { required: true, message: "请输入姓名", trigger: "blur" }
      //   ]

      // }
    };
  },
  computed: {
    // 物业选择弹窗
    dialogAttrs() {
      return {
        title: '选择隔离点工作人员',
        url: '/admin/user/getAllUser/',
        showData: [
          { label: '姓名', prop: 'realName' },
          { label: '部门', prop: 'deptName' },
        ],
        returnData: ['realName', 'deptName'],
        reserveSelection: true,
      };
    },
  },
  methods: {
    // 部门过滤
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    handleCheckChangeAreadiog(data) {
      this.delFlagAreadiog = data.divisionCode;
      this.$set(this.formData, 'hotelStreet', data.divisionName);
      this.$set(this.formData, 'belongto', data.divisionCode);
      this.delFlagVisibleAreadiog = false;
    },
    async loadNode(node, resolve) {
      let data = [];
      const response = await getDivision({
        lazy: true,
        parentId: node.data.divisionCode ? node.data.divisionCode : '000000',
      });
      data = response.data.data;
      resolve(data);
    },
    personnelTypeChange(v, i) {
      v === '41' && this.$refs.propertyChoose.show();
      this.hotelUsersIndex = i;
    },
    // 列表删除监听
    deleteList(index, type, subType = '') {
      if (subType) {
        this[type][subType].splice(index, 1);
      } else {
        this[type].splice(index, 1);
      }
    },

    // 监听物业改变
    // handlePropertyChange (data) {
    //   this.formData.hotelUsers[this.hotelUsersIndex].name = data.realName
    // },
    // 添加租金标准区间
    // addFeeInformation () {
    //   console.log(this.formData);
    //   this.formData.hotelUsers.push({
    //     hotelUsers: "",
    //     name: "",
    //     cardId: "",
    //     telPhone: "",
    //     post: '',
    //     remark: ''
    //   });
    // },
    //开启弹窗
    async show({ type, data = {} }) {
      type === 'edit' && this.getObj(data.hotelBaseInfoId);
      this.type = type;
      this.dialogVisible = true;
    },
    // 获取隔离点相关信息
    getObj(hotelBaseInfoId) {
      getObj(hotelBaseInfoId).then((res) => {
        this.formData = res.data.data;
        if (this.type == 'add') {
          this.formData.useStartTime = this.formData.creatime;
          this.formData.useEndTime = this.formData.creatime;
        }
      });
    },
    // 提交新增
    async save() {
      const formValid = await this.$refs.form.validate();
      // const hotelUsersValid = await this.$refs.hotelUsersForm.validate();
      if (!formValid && !hotelUsersValid) return;
      const res = await addOrEdit(this.formData, this.type);
      if (this.formData.useStartTime >= this.formData.useEndTime) {
        this.$message.error(`使用开始时间不能晚于使用终止时间！`);
      } else {
        if (res.data.code == 0) {
          this.$message.success(`提交成功!`);
          this.initList({ current: 1 });
          this.dialogVisible = false;
        }
      }
    },

    // 弹窗关闭还原
    handleClosed() {
      // let _formData = JSON.parse(JSON.stringify(this.formData))
      // for (let i in _formData) {
      //   _formData[i] = ''
      // }
      this.formData.hotelBaseInfoId = '';
      this.$refs.form.resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.addDialog {
  /deep/ .el-date-editor--datetime {
    width: 100%;
  }
  .album {
    .el-col {
      margin-bottom: 20px;
    }
    .img {
      width: 100%;
      height: 200px;
    }
  }
}
.stagnationPoint {
  @include formWrap(4);
}
</style>
